<template>
  <div class="home-header">
      <div class="header-left">
        <i class="iconfont iconfanhui"></i>
      </div>
      <div class="header-input">
        <i class="iconfont iconsousuo"></i> 
        输入城市/景点/游玩主题
      </div>
      <router-link tag="div" to="/city" class="header-right">{{city}}<i class="iconfont iconsanjiao"></i> </router-link>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:'Header',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~css/common.styl'
.home-header
  display flex
  height 0.86rem
  background $bgColor
  font-size 0.14rem
  color #fff
  .header-left 
    width 0.64rem
    line-height 0.86rem
    text-align center
    .iconfont
      font-size 0.4rem
  .header-right
    min-width 1.24rem 
    line-height 0.86rem
    text-align center
    .iconfont
      font-size 0.3rem
  .header-input 
    color #ccc
    line-height 0.62rem 
    padding-left 10px
    flex 1
    height .62rem
    background #fff
    margin-top 0.12rem
    border-radius 0.1rem
    margin-left 0.2rem
    box-sizing border-box
</style>